"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  TrendingUp,
  Users,
  DollarSign,
  Calendar,
  MapPin,
  Award,
  Building2,
  ChevronRight,
  Play,
  BookOpen,
} from "lucide-react"

export function SuccessStories() {
  const stories = [
    {
      id: "story_001",
      founder: {
        name: "李明",
        age: 32,
        avatar: "/placeholder.svg?height=60&width=60",
        background: "前阿里巴巴产品经理",
        location: "杭州",
      },
      company: {
        name: "智慧农业科技",
        industry: "农业科技",
        founded: "2021年",
        employees: 150,
        valuation: "5亿元",
        revenue: "8000万元",
      },
      story: {
        title: "从产品经理到农业科技创业者：用AI改变传统农业",
        summary: "放弃大厂高薪，回到家乡创业，用人工智能技术帮助农民提高产量",
        keyPoints: [
          "识别市场痛点：传统农业效率低下",
          "技术创新：AI病虫害识别准确率达95%",
          "商业模式：SaaS订阅+硬件销售",
          "快速扩张：2年内覆盖5个省份",
        ],
        timeline: [
          { year: "2021", event: "公司成立，获得天使轮500万" },
          { year: "2022", event: "产品上线，服务1000+农户" },
          { year: "2023", event: "A轮融资3000万，团队扩至50人" },
          { year: "2024", event: "B轮融资1.5亿，估值达5亿" },
        ],
      },
      metrics: {
        userGrowth: "+300%",
        revenueGrowth: "+250%",
        marketShare: "15%",
        customerSatisfaction: "96%",
      },
      tags: ["农业科技", "AI应用", "B2B", "快速增长"],
    },
    {
      id: "story_002",
      founder: {
        name: "张小雨",
        age: 28,
        avatar: "/placeholder.svg?height=60&width=60",
        background: "90后连续创业者",
        location: "深圳",
      },
      company: {
        name: "悦读时光",
        industry: "教育科技",
        founded: "2020年",
        employees: 80,
        valuation: "3亿元",
        revenue: "5000万元",
      },
      story: {
        title: "大学辍学创业：打造千万用户的在线阅读平台",
        summary: "从宿舍开始，用3年时间打造出用户过千万的阅读应用",
        keyPoints: [
          "用户洞察：年轻人碎片化阅读需求",
          "产品创新：AI推荐+社交阅读",
          "增长策略：内容+社区双轮驱动",
          "变现模式：会员订阅+知识付费",
        ],
        timeline: [
          { year: "2020", event: "宿舍创业，开发MVP版本" },
          { year: "2021", event: "用户突破100万，获得Pre-A轮" },
          { year: "2022", event: "A轮融资5000万，用户达500万" },
          { year: "2023", event: "B轮融资1.2亿，用户破千万" },
        ],
      },
      metrics: {
        userGrowth: "+400%",
        revenueGrowth: "+350%",
        marketShare: "8%",
        customerSatisfaction: "92%",
      },
      tags: ["教育科技", "内容平台", "用户增长", "知识付费"],
    },
    {
      id: "story_003",
      founder: {
        name: "王建国",
        age: 45,
        avatar: "/placeholder.svg?height=60&width=60",
        background: "传统制造业转型",
        location: "苏州",
      },
      company: {
        name: "智能制造解决方案",
        industry: "工业互联网",
        founded: "2019年",
        employees: 200,
        valuation: "8亿元",
        revenue: "1.2亿元",
      },
      story: {
        title: "传统制造业的数字化转型：从代工厂到解决方案提供商",
        summary: "45岁二次创业，将传统制造经验与数字化技术结合",
        keyPoints: [
          "行业经验：20年制造业深度积累",
          "转型契机：工业4.0浪潮来临",
          "技术整合：IoT+AI+大数据",
          "客户价值：帮助工厂提效30%",
        ],
        timeline: [
          { year: "2019", event: "成立公司，专注智能制造" },
          { year: "2020", event: "首个标杆客户，效果显著" },
          { year: "2021", event: "A轮融资8000万，扩大团队" },
          { year: "2022", event: "B轮融资2亿，全国布局" },
        ],
      },
      metrics: {
        userGrowth: "+200%",
        revenueGrowth: "+180%",
        marketShare: "12%",
        customerSatisfaction: "94%",
      },
      tags: ["工业互联网", "数字化转型", "B2B", "传统行业"],
    },
  ]

  return (
    <div className="space-y-8">
      <div className="text-center">
        <h2 className="text-3xl font-bold text-slate-900 mb-4">创业成功故事</h2>
        <p className="text-slate-600 max-w-2xl mx-auto">真实的创业故事，深度的经验分享，为你的创业之路提供启发和指导</p>
      </div>

      <div className="space-y-8">
        {stories.map((story, index) => (
          <Card
            key={story.id}
            className="bg-white/70 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300"
          >
            <CardContent className="p-8">
              {/* 创始人信息 */}
              <div className="flex items-start justify-between mb-6">
                <div className="flex items-center space-x-4">
                  <Avatar className="w-16 h-16">
                    <AvatarImage src={story.founder.avatar || "/placeholder.svg"} />
                    <AvatarFallback>{story.founder.name[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <h3 className="text-xl font-semibold text-slate-900">{story.founder.name}</h3>
                    <p className="text-slate-600">{story.founder.background}</p>
                    <div className="flex items-center space-x-4 mt-1 text-sm text-slate-500">
                      <div className="flex items-center space-x-1">
                        <Calendar className="w-4 h-4" />
                        <span>{story.founder.age}岁</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <MapPin className="w-4 h-4" />
                        <span>{story.founder.location}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="text-right">
                  <Badge className="bg-green-100 text-green-700 mb-2">
                    <Award className="w-3 h-3 mr-1" />
                    成功案例
                  </Badge>
                  <div className="text-sm text-slate-500">{story.company.industry}</div>
                </div>
              </div>

              {/* 公司信息 */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 p-4 bg-slate-50 rounded-lg">
                <div className="text-center">
                  <div className="flex items-center justify-center mb-1">
                    <Building2 className="w-4 h-4 text-blue-600" />
                  </div>
                  <div className="text-sm font-medium text-slate-900">{story.company.name}</div>
                  <div className="text-xs text-slate-500">公司名称</div>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center mb-1">
                    <DollarSign className="w-4 h-4 text-green-600" />
                  </div>
                  <div className="text-sm font-medium text-slate-900">{story.company.valuation}</div>
                  <div className="text-xs text-slate-500">估值</div>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center mb-1">
                    <TrendingUp className="w-4 h-4 text-purple-600" />
                  </div>
                  <div className="text-sm font-medium text-slate-900">{story.company.revenue}</div>
                  <div className="text-xs text-slate-500">年营收</div>
                </div>
                <div className="text-center">
                  <div className="flex items-center justify-center mb-1">
                    <Users className="w-4 h-4 text-orange-600" />
                  </div>
                  <div className="text-sm font-medium text-slate-900">{story.company.employees}人</div>
                  <div className="text-xs text-slate-500">团队规模</div>
                </div>
              </div>

              {/* 故事标题和摘要 */}
              <div className="mb-6">
                <h4 className="text-lg font-semibold text-slate-900 mb-2">{story.story.title}</h4>
                <p className="text-slate-600">{story.story.summary}</p>
              </div>

              {/* 关键要点 */}
              <div className="mb-6">
                <h5 className="font-medium text-slate-900 mb-3">成功关键要点</h5>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {story.story.keyPoints.map((point, pointIndex) => (
                    <div key={pointIndex} className="flex items-start space-x-2">
                      <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
                      <span className="text-sm text-slate-600">{point}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* 发展时间线 */}
              <div className="mb-6">
                <h5 className="font-medium text-slate-900 mb-3">发展历程</h5>
                <div className="space-y-3">
                  {story.story.timeline.map((milestone, timeIndex) => (
                    <div key={timeIndex} className="flex items-start space-x-3">
                      <div className="flex-shrink-0 w-16 text-sm font-medium text-blue-600">{milestone.year}</div>
                      <div className="flex-1 text-sm text-slate-600">{milestone.event}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 关键指标 */}
              <div className="mb-6">
                <h5 className="font-medium text-slate-900 mb-3">关键指标</h5>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="text-center p-3 bg-blue-50 rounded-lg">
                    <div className="text-lg font-bold text-blue-600">{story.metrics.userGrowth}</div>
                    <div className="text-xs text-slate-600">用户增长</div>
                  </div>
                  <div className="text-center p-3 bg-green-50 rounded-lg">
                    <div className="text-lg font-bold text-green-600">{story.metrics.revenueGrowth}</div>
                    <div className="text-xs text-slate-600">营收增长</div>
                  </div>
                  <div className="text-center p-3 bg-purple-50 rounded-lg">
                    <div className="text-lg font-bold text-purple-600">{story.metrics.marketShare}</div>
                    <div className="text-xs text-slate-600">市场份额</div>
                  </div>
                  <div className="text-center p-3 bg-orange-50 rounded-lg">
                    <div className="text-lg font-bold text-orange-600">{story.metrics.customerSatisfaction}</div>
                    <div className="text-xs text-slate-600">客户满意度</div>
                  </div>
                </div>
              </div>

              {/* 标签和操作 */}
              <div className="flex items-center justify-between">
                <div className="flex flex-wrap gap-2">
                  {story.tags.map((tag, tagIndex) => (
                    <Badge key={tagIndex} variant="outline" className="text-xs">
                      {tag}
                    </Badge>
                  ))}
                </div>
                <div className="flex space-x-2">
                  <Button variant="outline" size="sm">
                    <BookOpen className="w-4 h-4 mr-2" />
                    阅读全文
                  </Button>
                  <Button size="sm">
                    <Play className="w-4 h-4 mr-2" />
                    观看视频
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 更多故事 */}
      <div className="text-center">
        <Button variant="outline" size="lg">
          <ChevronRight className="w-4 h-4 mr-2" />
          查看更多成功故事
        </Button>
      </div>
    </div>
  )
}
